<template>
  <div id="qeuCallRank">
    <div class="header">
      <h1
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: #344563;
        "
      >
        器材调用排行
      </h1>
      <!-- <el-form
        ref="form"
        inline
        :model="sizeForm"
        label-width="80px"
      >
        <el-form-item label="开始时间">
          <el-col :span="20">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="sizeForm.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-col :span="20">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="sizeForm.date2"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form> -->
    </div>
    <div ref="main" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      sizeForm: {
        date1: "",
        date2: "",
      },
      equipmentName:[],
      number:[],
    };
  },
  methods: {
    chartFn() {
      var myChart = echarts.init(this.$refs.main);
      myChart.setOption({
        title: {
          text: "",
          show: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.25],
          name: "调用次数",
          position: "top",
        },
        yAxis: {
          type: "category",
          data: this.equipmentName,
          inverse: true,
        },
        series: [
          {
            name: "",
            type: "bar",
            data: this.number,
            color: "pink",
          },
        ],
      });
    },
  },
  mounted: function () {
    this.$axios.get("/equipmentNumber").then(({data})=>{
      if(data.code==0){
        data.data.forEach(v=>{
          this.equipmentName.push(v.equipmentName);
          this.number.push(v.number);
          this.chartFn();
        })
      }else{
        this.$message.error('数据加载失败！')
      }
    })
  },
};
</script>

<style lang="less" scoped>
#qeuCallRank {
  padding: 30px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
}
</style>